  <template>
	<view style="background-color: white; height: 100%;">
        <scroll-view scroll-y class="page">
            <view class="top-bg">
				<view class="zai-title text-shadow" :style="[{animation: 'show ' + 0.4+ 's 1'}]">餐厨收运</view>
			</view>
            <view class="box padding-lr-xl login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title" style="color: #333;"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
						<input placeholder="请输入账号" name="input" v-model="userName"></input>
					</view>
					<u-gap height="10"></u-gap>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title" style="color: #333;"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
						<input class="uni-input" placeholder="请输入密码" :password="!showPassword" v-model="password" />
						<view class="action text-lg">
						    <text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']" @click="changePassword"></text>
						</view>
					</view>
					<u-gap height="10"></u-gap>
					
					<view class="text-center margin-top" style="margin-top: 60rpx; margin-bottom: 60rpx;">
						<button class="cu-btn bg-blue lg shadow" style="display: block; height: 100rpx; line-height: 100rpx;" :loading="loading" :class="[shape=='round'?'round':'']"
							@tap="onLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
					</view>
				</block>
            </view>
        </scroll-view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">登录中...</view>
		</view>
    </view>

</template>

<script>
	import { ACCESS_TOKEN,USER_NAME,USER_INFO } from "@/common/util/constants"
	import { mapActions } from "vuex"
    import configService from '@/common/service/config.service.js';
	
    export default {
        data() {
            return {
				shape:'',//round 圆形
				loading: false,
				userName: '',
				password: '',
				showPassword: false //是否显示明文
            };
        },
		computed: {
		    canPwdLogin() {
		        return this.userName.length > 4 && this.password.length > 4;
		    }
		},
		mounted(){
			uni.clearStorageSync();
			this.$store.dispatch('setMerchant', {
				merchant: ''
			});
		},
        methods: {
			...mapActions([ "mLogin"]),
			onLogin: function (){
			        if(!this.userName || this.userName.length==0){
			          this.$tip.toast('请填写用户名');
			          return;
			        }
			        if(!this.password || this.password.length==0){
			           this.$tip.toast('请填写密码');
			          return;
			        }
			        let loginParams = {
			          username:this.userName,
			          password:this.password
			        }
					this.loading=true;
			        this.mLogin(loginParams).then((res) => {
					    this.loading=false;
			            if(res.data.success){
						    //this.$tip.success('登录成功!')
						    uni.navigateTo({
						  	    url: '/pages/index/index'
						    })
						}
						else{
			                uni.showToast({
			                	icon: 'none',
								title: res.data.message,
								duration: 1500
			                });
			            }
			        }).catch((err) => {
			            let msg = err.data.message || "请求出现错误，请稍后再试"
			            this.loading=false;
					    uni.showToast({
					    	icon: 'none',
					    	title: msg,
					    	duration: 1500
					    });
			        }).finally(()=>{
					    this.loading=false;
				   })
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			}
        }
    }
</script>

<style scoped>
    .login-paddingtop {
        padding-top: 100upx;
    }

    .zai-box {
        padding: 0 20upx;
        padding-top: 100upx;
        position: relative;
    }

    .zai-logo {
        width: 200upx;
        height: 150px;
    }

    .zai-title {
       font-size: 58upx;
       color: #ffffff;
       text-align: center;
    }

    .input-placeholder, .zai-input {
        color: #94afce;
    }

    .zai-label {
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }

    .zai-btn {
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
    }

    .zai-btn:after {
        border: 0;
    }

    /*按钮点击效果*/
    .zai-btn.button-hover {
        transform: translate(1upx, 1upx);
    }
	
	.components-bggrad {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		background: linear-gradient(45deg, #00F5D4, #01BEFF, #9A5CE5, #F15BB5);
		background-size: 500% 500%;
		animation: gradientBG 15s ease infinite;
	}
	
	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}
	
		50% {
			background-position: 100% 50%;
		}
	
		100% {
			background-position: 0% 50%;
		}
	}
	.top-bg{
		width: 750rpx;
		background-image: url(https://mini.wm-mis.com/img/static/head-bg.png);
		height: 480rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		text-align: center;
		padding-top: 170rpx;
	}

</style>
